<template lang="html">
  <div class="main" :style="{height: fullHeight + 'px'}">
        <el-carousel trigger="click" :height="fullHeight - 50 + 'px'" :autoplay="false">
         <el-carousel-item v-for="item in 2" :key="item">
           <grid
                :center="false"
                :draggable="true"
                :sortable="true"
                :items="colors"
                :cellWidth="150"
                :cellHeight="150"
                @change="change"
                @remove="remove"
                @dragend="dragend"
                @dragstart="dragstart"
                @drag="drag"
                @click="click"
                @sort="sort">
                <template slot="cell" slot-scope="props">
                  <icon :src="props.item.src" :text="props.item.text"></icon>
                </template>
              </grid>
         </el-carousel-item>
       </el-carousel>

       <!-- 窗口 -->
       <hsc-window-style-metal>
         <template v-for="(item, i) in windows">
           <hsc-window :key="i" :ref="'window_' + item.id" :class="{full: item.full}" :style="{'height': item.full ? (fullHeight + 'px') : '500px', 'width': item.full ? '100%' : '800px', 'z-index': item.full ? 9999 : 100 - item.index}" @mousedown.native="move(item, i)" :closeButton="false" :isOpen="item.isOpen">
             <div class="" slot="title">
               <span style="float: left;">{{item.title}}</span>
               <button style="float: right;" @click="closeWin(item)">关闭</button>
               <button style="float: right;" @click="item.full = !item.full">{{item.full ? '小屏' : '全屏'}}</button>
               <button style="float: right;" @click="item.isOpen = false">缩小</button>
             </div>
             <div style="width: 100%; height: 100%;">
               <iframe src="http://www.baidu.com" style="width: 100%; height: 100%;"></iframe>
             </div>
           </hsc-window>
         </template>
       </hsc-window-style-metal>

       <!-- 底部 -->
       <div class="bottom">
         <div class="img">
           <el-tooltip content="Bottom center" placement="bottom" effect="light">
             <img src="../assets/u194.png">
           </el-tooltip>
           <el-tooltip content="Bottom center" placement="bottom" effect="light">
             <img src="../assets/u191.png">
           </el-tooltip>
           <el-tooltip v-for="(item, i) in windows" :key="i" :content="item.title" placement="bottom" effect="light">
             <img :src="item.src" @click="openWin(item)">
           </el-tooltip>
         </div>
         <div class="state_img">
           <div class="state_img_item">
             <img src="../assets/u575.png">
           </div>
           <div class="state_img_item" @click="toggleMenu">
             <img src="../assets/u569.png">
           </div>
           <div class="state_img_item">
             <img src="../assets/u566.png">
           </div>
         </div>
       </div>
       <div :class="rightMsgClass" :style="{'height': fullHeight - 50 + 'px'}">
         <div class="right-msg-tool">
           <div>刷新</div>
           <div></div>
           <div  @click="toggleMenu">关闭</div>
         </div>
         <div class="right-msg-body">
           当前没有消息或通知
         </div>
       </div>
  </div>
</template>

<script>
import Icon from './Icon'
export default {
  data () {
    return {
      fullHeight: document.documentElement.clientHeight,
      msgIsOpen: false,
      windows: [],
      colors: [{
        id: 1,
        src: require('@/assets/u169.png'),
        text: '美图拍拍'
      }, {
        id: 2,
        src: require('@/assets/u173.png'),
        text: '应用中心'
      }, {
        id: 3,
        src: require('@/assets/u174.png'),
        text: '服务中心'
      }]
    }
  },
  components: {
    Icon
  },
  created () {
    window.addEventListener('resize', this.handleResize)
  },
  computed: {
    rightMsgClass () {
      return this.msgIsOpen ? 'right_msg right_msg_open' : 'right_msg right_msg_close'
    }
  },
  methods: {
    closeWin (obj) {
      this.windows.splice(this.windows.findIndex(item => item.id === obj.id), 1)
    },
    openWin (obj) {
      if (obj.isOpen) {
        obj.isOpen = false
        return
      }
      this.windows.filter(w => w.index <= obj.index).map(w => {
        if (w.id === obj.id) {
          w.index = 0
          w.isOpen = true
        } else {
          w.index = w.index + 1
        }
      })
    },
    move (obj, index) {
      // 排序
      this.windows.filter(w => w.index <= obj.index).map(w => {
        if (w.id === obj.id) {
          w.index = 0
        } else {
          w.index = w.index + 1
        }
      })
    },
    toggleMenu () {
      this.msgIsOpen = !this.msgIsOpen
    },
    handleResize (event) {
      this.fullHeight = document.documentElement.clientHeight
    },
    click ({ items, index }) {
      let value = items.find(v => v.index === index)
      let item = this.windows.find(f => f.id === value.item.id)
      if (!item) {
        item = {id: value.item.id, title: value.item.text, index: 0, isOpen: false, full: false, src: value.item.src}
        this.windows.push(item)
      }
      this.openWin(item)
    },
    change (event) {
      console.log('change', event)
    },
    remove (event) {
      console.log('remove', event)
    },
    dragstart (event) {
      console.log('dragstart', event)
    },
    dragend (event) {
      console.log('dragend', event)
    },
    drag (event) {
      console.log('drag', event)
    },
    sort (event) {
      console.log('sort', event)
    }
  }
}
</script>

<style lang="css">
.main {
  background-image: url('../assets/homebg_u281.jpg');
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.bottom {
  z-index: 999;
  height: 50px;
  width: 100%;
  position: absolute;
  bottom: 0px;
  background-color:rgba(0,0,0,0.6);
}
.bottom .img {
  bottom: 15px;
  margin-top: -30px;
}
.bottom .img img {
  padding-left: 15px;
  padding-right: 15px;
  height: 60px;
  width: 60px;
  cursor: pointer;
}
.bottom .state_img {
  right: 10px;
  position: fixed;
  display: flex;
  bottom: 0px;
  flex-direction: row;
}
.bottom .state_img_item{
  width: 50px;
  height: 50px;
  line-height: 50px;
  cursor: pointer;
}
.bottom .state_img_item:hover{
 background-color:rgba(0,0,0,0.9);
}
.bottom .state_img_item img{
  vertical-align: middle;
  height: 20px;
  width: 20px;
}
.el-carousel__arrow--left, .el-carousel__arrow--right {
  display: none;
}
.el-carousel__indicators {
  bottom: 50px;
}

.right_msg {
  position: absolute;
  -webkit-transition: width .3s ease-in-out 0s;
  transition: width .3s ease-in-out 0s;
  right: 0px;
  top: 0px;
  z-index: 998;
  background-color:rgba(0,0,0,0.9);
}
.right_msg_open {
  width: 270px;
}
.right_msg_close {
  width: 0px;
}
.right-msg-tool {
  width: 270px;
  height: 30px;
  line-height: 30px;
  top: 15px;
  position: fixed;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  color: #f1f1f1;
}
.right-msg-tool div {
  flex: 1;
  height: 100%;
  margin-right: 1px;
  background-color: #333;
}
.right-msg-tool div:last-child {
  cursor: pointer;
}
.right-msg-body {
  width: 270px;
  height: 90%;
  margin-top: 50px;
  color: #f1f1f1;
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.main .full {
  top: 0px !important;
  left: 0px !important;
}
.window .content {
  width: 98% !important;
}
</style>
